<template>
	<view class="content">
		<view class="top">
			<view class="cancel" @click="goBack()">取消</view>
			<view class="app-title">发布海报</view>
			<view class="mini-btn" @click="publish()">发表</view> 
		</view>
		<view class="center">
			<view class="area-input">
				<input class="input-text" type="text" v-model="imageText" placeholder="不放假的周日，我想..."/>
			</view>
			<view class="select-photo" @click="imageClick()">
				<image class="img-photo" v-if="imagePath.length==0" src="../../static/picture.png" mode="aspectFit"></image>
				<image class="img-photo" v-if="imagePath.length>0" :src="imagePath" mode="aspectFit"></image>
			</view>
			<view class="face-bottom">
				<view class="add-label" v-for="face in faceList" @click="faceText(face)">
					看上去{{face.beauty>40?"非常好看":"有点好看"}}的{{gender[face.gender]}},大约{{face.age}}岁。
				</view>
				
			</view>
			<view class="icon-bottom">
				<view class="make-public">
					<picker @change="typeChange" :value="typeIndex"  :range="typeList" mode="selector">
						<view>{{typeList[typeIndex]}}</view>
					</picker>
				</view> 
			</view>
		</view>
		
	</view>
</template>
<style>
	.content{
		background-color: #fff;
	}
	.face-bottom{
		width:90%;
		padding:0 5%;
		display: flex;
		flex-direction: column;
	}
	.face-bottom .add-label{
		margin-top:5px;
	}
	.bottom{
		display: flex;
		margin: 3%;
		align-items: center;
	}
	.qq-icon{
		width: 17px;
		height: 17px;
	}
	.pyq-icon{
		width: 20px;
		height: 20px;
		margin-left: 3%;
	}
	.history-icon{
		width: 20px;
		height: 20px;
		margin-left:80%;
	}
	.icon-bottom{
		font-size: 10%;
		color: #999db2;
		height: 15vh;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top:5px;
	}
	.img-label{
		width: 10px;
		height: 10px;
	}
	.img-address{
		width: 10px;
		height: 10px;
	}
	.img-public{
		width: 10px;
		height: 10px;
	}
	.add-label{
		font-size: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding:5px;
		border-radius: 15px;
		background-color: #f3f5f8;
		margin-left: 3%;
		
	}
	.add-adress{
		font-size: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 130px;
		height: 25px;
		border-radius: 15px;
		background-color: #f3f5f8;
		margin-left: 3%;
	}
	.make-public{
		font-size: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100px;
		height: 25px;
		border-radius: 15px;
		background-color: #f3f5f8;
		margin-right:10px;
	}
	
	.center{
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		height: 50vh;
		margin-top: 4%;
	}
	.area-input{
		display: flex;
		margin: 3%;
		height: 35vh;
	}
	.input-text{
		width:90%;
	}
	.select-photo{
		display: flex;
		height: 50vh;
		align-items: center;
		
		
	}
	.img-photo{
		width: 150px;
		height: 150px;
		margin-left: 3%;
	}
	.content{
		background-color:#f3f3f3;
		width: 750rpx;
		height: 100vh;
	}
	.top{
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 4% 5%;
	}
	.mini-btn{
		display: flex;
		font-size: 80%;
		color: #FFFFFF;
		justify-content: center;
		align-items: center;
		width: 60px;
		height: 25px;
		border-radius: 15px;
		background-color: #ff2442;
	}
</style>

<script>
	export default {
		data() {
			return {
				typeIndex: 0,
				typeList:['推荐','美食'],
				typeIdList:[1,2],
				token:'',
				//一句话
				imageText:'',
				//一张图
				imagePath:'',
				//海报图片URL
				contentImage:'',
				//海报图片检测到的人脸信息
				faceList:[],
				gender:{
					male:"男生",
					female:"女生",
					none:"未知性别的人"
				}
			}
		},
		onLoad() {
			//判断当前登录状态：localstorage里有没有token存储
			this.token=uni.getStorageSync("token");
			//没有token，跳转到登录
			if(this.token==null || this.token.length==0){
				uni.redirectTo({
					url:"../login/login"
				})
			}
			this.loadTypeData();
		},
		methods: {
			//人脸识别结果点击
			faceText(face){
				var text="看上去"
				+(face.beauty>40?"非常好看":"有点好看")+"的"
				+this.gender[face.gender]+"，大约"+face.age+"岁。";
				
				this.imageText=text;
			},
			typeChange(e){
				this.typeIndex=e.detail.value;
			},
			imageClick(){
				uni.chooseImage({
					count:1,
					sizeType:["original","compressed"],
					sourceType:["camera","album"],
					success:(file)=>{
						this.imagePath=file.tempFilePaths[0];
						
						//自动进行文件上传
						//将选择的图片上传到服务器上，获得服务器地址
						uni.showLoading({
							title:"解析海报图片"
						});
						uni.uploadFile({
							url:this.serverUrl+"/api/file-upload",
							filePath:this.imagePath,
							name:'file',
							header:{
								Authorization:'Bearer '+this.token
							},
							success:(res)=>{
								console.log("文件上传结果：",res);
								//表示上传成功
								if(res.statusCode==200){
									//将文件上传返回的json字符串转为js对象
									var imageObject=JSON.parse(res.data);
									console.log("上传结果的js对象",imageObject);
									this.contentImage=imageObject.fileUrl;
									this.faceList=imageObject.faceList;
								}
							},
							complete() {
								uni.hideLoading();
							}
						});
						
					}
				});
			},
			//获取分类数据
			loadTypeData(){
				uni.request({
					url:this.serverUrl+'/api/content-types',
					method:'GET',
					success:(result)=>{
						if(result.statusCode==200){
							var typeArray=result.data;
							for(var i=0;i<typeArray.length;i++){
								this.typeList[i]=typeArray[i].contentTypeName;
								this.typeIdList[i]=typeArray[i].id;
							}
						}
					}
				})
			},
			
			goBack(){
				uni.navigateBack();
			},
			
			publish(){
				if(this.imageText==''){
					uni.showToast({
						title:'请输入海报文案',
						icon:'none'
					})
					return;
				}
				if(this.imagePath==''){
					uni.showToast({
						title:'请选择海报图片',
						icon:'none'
					})
					return;
				}
				var sendObject={
					contentText:this.imageText,
					contentImg:this.contentImage,
					contentType:{
						id:this.typeIdList[this.typeIndex]
					}
				};
				
				
				uni.request({
					url:this.serverUrl+"/api/content-infos",
					method:'POST',
					header:{
						Authorization:'Bearer '+this.token
					},
					data:sendObject,
					success:(sendResult)=>{
						console.log("海报发布结果",sendResult);
						if(sendResult.statusCode==201){
							uni.showToast({
								title:"发布成功"
							});
							setTimeout(()=>{
								this.goBack();
							},1500)
						}else{
							uni.showToast({
								title:"海报发布失败",
								icon:'none'
							})
						}
					}
				})
				
				
				
			}
		}
	}
</script>


